<template>
	<view>
		<view class="flex-sb p-30 relative" :style="{ marginTop: statusBarHeight1 + 'px' }">
			<view class="flex">
				<image class="size-50" src="/static/publicImages/back.png" mode="" @click="$back()"></image>
				<view class="fs-36 bold mg-l-20" style="line-height: 1;">{{title}}</view>
			</view>

			<!-- type==1 带跳转 传url -->
			<view class="size-50" v-if="type==1" @click="$jump(url)">
				<image class="size-50" src="/static/publicImages/list.png" mode=""></image>
			</view>

			<!-- type==2 带弹窗 传list[ text img url ] -->
			<view class="size-50" v-if="type==2" @click="changeCard">
				<image class="size-50" src="/static/publicImages/list.png" mode=""></image>
			</view>
			<view class="absolute radius-20 bg-gray toast-card" v-show="cardCurrent">
				<view style="width: 320rpx;" v-for="(item,index) in list" :key="index" @click.stop="$jump(item.url)">
					<view class="flex-sb p-20" :class="index === 0 ? 'top-list' : ''">
						<view class="fs-30" :class="index != 0 ? 'c-gray' : ''">{{item.text}}</view>
						<image class="size-30" :src="item.img"></image>
					</view>
					<view class="driver" style="background-color: #666666;" v-if="list.length!=index+1"></view>
				</view>
			</view>

			<!-- type==3 搜索 -->
			<view class="size-30" v-if="type==3" @click="searchShow=true">
				<image class="size-30" src="/static/publicImages/search.png" mode=""></image>
			</view>
			
		</view>
		
		<!-- 搜索功能 -->
		<u-popup :show="searchShow" mode="top" :round="20" @close="searchClose" @open="searchOpen">
			<view class="p-30">
				<view class="flex-sb">
					<view class="fs-30 bold">搜索好友</view>
					<image class="size-60" src="/static/myImages/close.png" @click="searchClose()"></image>
				</view>
				<view class="flex p-20 radius-50 bg-f5f6f8 mg-t-30">
					<image class="size-30 mg-r-10" src="/static/publicImages/search.png" mode=""></image>
					<input class="fs-24 c-gray" placeholder="输入ID搜索"/>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		props: {
			title: {
				type: String,
				default: 'test'
			},
			type: {
				type: Number,
				default: 0
			},
			url: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				img_src: app.globalData.img_src,
				statusBarHeight: getApp().globalData.statusBarHeight,
				statusBarHeight1: getApp().globalData.statusBarHeight1,
				cardCurrent: false,
				searchShow: false,


			}
		},
		onLoad() {},
		methods: {
			changeCard() {
				this.cardCurrent = !this.cardCurrent;
			},
			searchOpen() {

			},
			searchClose() {
				this.searchShow = false
			}

		}
	}
</script>

<style scoped lang="scss">
	.toast-card {
		right: 30rpx;
		top: 100%;
		border: #f6f6f6 solid 1rpx;
		padding: 1rpx;
		z-index: 999;
	}

	.top-list {
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>